<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员主页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="icon" href="imags/33.jpg">
    <style>
        .card {
            margin-top: 2rem;
        }
    </style>
</head>

<body style="background:url(/imags/2.jpg); background-size:100% 100% ; background-attachment: fixed">
    <div class="container">
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <div class="card" style="width: 50rem;opacity: 0.7;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                                    onclick="addquestion()">添加问卷</button>



                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p>当前用户：{{username}}</p>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end"><button type="button"
                                    class="btn btn-secondary btn-sm" onclick="logout()">注销</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="col-sm"></div>
        </div>

        <!-- 显示添加问卷的主题以及查看统计分数 -->
        <div
            style="padding: 10px;width: 800px;margin-left: 130px;height: 500px;background-color: rgba(226, 212, 212,.6);margin-top: 30px;">
            <ol>
                {% for item in QtList%}
                <li>
                    <label for="">{{item.name}}</label>
                    <button value="分享问卷" onclick="share('{{item.id}}')" type="button" class="" data-toggle="modal" data-target="#exampleModal">分享问卷</button>
                    <button value="统计">统计</button>
                    <button type="button" class="" style="margin-left: 1rem;"
                        onclick="priviewquestion('{{item.id}}')">预览发表问卷</button>
                </li>
                {% endfor %}
            </ol>
        </div>
        <!-- Button trigger modal -->


        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">复制链接</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
           

        </div>

        <script src="js/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            //跳转到添加问卷界面
            function addquestion() {
                return window.location.href = '/addquestion';
            }
            //跳转到预览问卷界面
            function priviewquestion(id) {
                return window.location.href = 'http://localhost:3000/priviewquestion?id=' + id;
            }

            function share(id) {
                console.log('分享');
                // alert(`分享问卷\h
                //     复制下面连接进入问卷\h
                //    
                // `)
                $('.modal-body').html(`
                <h3>分享问卷</h3></br>
                <span> http://localhost:3000/qestion?id=${id}</span>
                `)
            }



            let currentMsgId = '';
            function sayComment(msgId) {
                currentMsgId = msgId;
            }
            function saysay() {
                axios({
                    method: 'post',
                    url: '/say',
                    data: {
                        sayMsg: $('#sayMsg').val()
                    }
                }).then(function (response) {
                    let res = response.data;
                    if (res.code === 200) {
                        let data = JSON.parse(res.data);
                        let html = `
                     <div class="card border-primary shadow" style="width: 50rem;opacity: 0.7;">
                     <div class="card-header">
                         <div class="row">
                             <div class="col-sm-10">${data.content}</div>
                             <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                     data-toggle="modal" data-target="#comment" onclick="sayComment(${data.id})">吐槽一下</button>
                             </div>
                         </div>

                     </div>
                     <div class="card-body">
                         <ul class="list-group list-group-flush" id="${data.id}">
                         </ul>

                     </div>
                 </div>
                 `
                        $("#saysaymsg").prepend(html);

                    }
                }).catch((err) => {

                });
            }


            // 注销登录
            function logout() {
                axios({
                    method: 'post',
                    url: '/logout'
                }).then(function (response) {
                    let res = response.data;
                    if (res.code === 200) {
                        window.location.href = '/login';
                    }
                }).catch((err) => {

                });
            }



        </script>

</body>

</html>